<template>
    <div class="usertableManger">
        <div class="userSheach">
            <div class="item">
                <span>用户id:</span>
                <n-input v-model:value="parmas.userid" placeholder="输入用户id" />
            </div>
            <div class="item">
                <span>用户名:</span>
                <n-input v-model:value="parmas.username" placeholder="输入用户名" />
            </div>
            <div class="item">
                <span>用户状态:</span>
                <n-select class="selectItem" v-model:value="parmas.status" :options="optionSelect"
                    placeholder="请选择状态" />
            </div>
            <div class="itemBtn">
                <n-button attr-type="button"  type="info" @click="queryBtn">查询</n-button>
                <n-button attr-type="button" @click="resetValue">重置</n-button>
            </div>
        </div>
        <div class="usertable">
            <div class="usertableAllBtn">
                <n-button type="info" class="addBtn" @click="addUser">添加</n-button>
                <n-button type="error" @click="batchDelete">删除 </n-button>
            </div>
            <n-data-table :columns="columns" :data="tableData" :max-height="250" :row-key="row => row.userid"
                @update:checked-row-keys="handleCheck" />
            <div class="userPagination">
                <span></span>
                <n-pagination :item-count="pagination.total" :on-update:page="updatePage"
                    :on-update:page-size="updateSize" :page-sizes="[2, 5, 15, 40]" show-size-picker />
            </div>
        </div>
        <AddUserPage v-if="addUserMdel" :typeMael="typeMael" :dataTable="dataTable" :addUserMdel="addUserMdel" @addUserClear="addUserClear" />
    </div>
</template>
<script lang="ts">

import { defineComponent, ref, reactive, toRefs, watchEffect, h, onBeforeMount } from 'vue'
import { NButton ,useMessage } from 'naive-ui'
import { userList, userDelete } from '../../../api/user.js'
import AddUserPage from './component/addUserPage.vue'
const message = useMessage ()
export default defineComponent({
    components: {
        AddUserPage
    },
    setup() {
        const columns = [
            {
                type: 'selection',
                // disabled(row, index) {
                //     return row.name === 'Edward King 3'
                // }
            },
            {
                title: '用户id',
                key: 'userid'
            },
            {
                title: '昵称',
                key: 'usename'
            },
            {
                title: '状态',
                key: 'status',
                render: (row) => {
                    return row.status == 0 ? '离职' : row.status == 1 ? '实习' : row.status == 2 ? '在职' : row.status == 3 ? '大佬' : '未知'
                }
            },
            {
                title: '邮箱',
                key: 'userEmail'
            },
            {
                title: '岗位',
                key: 'job'
            },
            {
                title: '系统角色',
                key: 'rolelist',
                render: (row) => {
                    return row?.rolelist.map(item => {
                        return item.label + ' '
                    })

                }
            },
            {
                title: '部门',
                key: 'deptId',
                render: (row) => (
                    row.role == 0 ? '星澜技术' : row.role == 1 ? '研发' : row.role == 2 ? '测试' : row.role == 3 ? '销售' : row.role == 4 ? '产品' : '其他'

                )
            },
            {
                title: '时间',
                key: 'startTime'
            },
            {
                title: '操作',
                key: 'actions',
                render(row) {
                    return h(
                        'div',
                        {},
                        [
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "info",
                                    onClick: () => methods.sendMailEditor(row)
                                },
                                {
                                    default: () => '编辑'
                                }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "error",
                                    class: 'delteBtn',
                                    onClick: () => methods.userOneDelete(row)
                                },
                                {
                                    default: () => '删除'
                                }
                            )
                        ]
                    )
                }
            }
        ]

        const parameter = reactive({
            parmas: {
                pageNum: 1,
                pageSize: 10,
                 userid: '',
                username: '',
                status: null
            },
            pagination: {
                total: 10,
            },
            addUserMdel: false,
            tableData: [],
            optionSelect: [
                {
                    label: '离职',
                    value: 0
                }, {
                    label: '实习',
                    value: 1
                },
                {
                    label: '在职',
                    value: 2
                },
                {
                    label: '大佬',
                    value: 3
                },
            ],
            dataTable:[],
            typeMael:'add'
        })

        onBeforeMount(() => {
            methods.pageList(parameter.parmas)
        })

        const checkedRowKeysRef = ref([])
        const methods = reactive({
            pageList: (item) => {
                userList(item).then(res => {
                    parameter.pagination.total = res.page.total
                    parameter.tableData = res.data
                })
            },
            handleCheck(rowKeys) {
                checkedRowKeysRef.value = rowKeys
            },
            batchDelete(){
                 userDelete({ ids: checkedRowKeysRef.value }).then(res => {
                    message.success('操作成功')
                    methods.pageList(parameter.parmas)
                })
            },
            sendMailEditor(item) {
               console.log(item)
               parameter.addUserMdel=true
               parameter.typeMael='edit'
               parameter.dataTable=item
            },
            updatePage(e) {
                parameter.parmas.pageNum = e
                methods.pageList(parameter.parmas)
            },
            updateSize(e) {
                console.log(e)
                parameter.parmas.pageSize = e
                methods.pageList(parameter.parmas)
            },
            addUser() {
                parameter.addUserMdel = true
                parameter.typeMael='add'
            },
            addUserClear(item) {
                parameter.addUserMdel = false
                if (item === 'add') {
                    parameter.addUserMdel = false
                    methods.pageList(parameter.parmas)
                    return
                }
                parameter.addUserMdel = false
            },
            userOneDelete(item) {
                 userDelete({ ids: [item.userid] }).then(res => {
                    message.success('操作成功')
                    methods.pageList(parameter.parmas)
                })
            },
            queryBtn(){
                methods.pageList(parameter.parmas)
            },
            resetValue(){
               parameter.parmas.status=null
               parameter.parmas.userid=null
               parameter.parmas.username=null
            },
        })

        return {
            userList,
            columns,
            ...toRefs(methods),
            ...toRefs(parameter),
        }
    }



})
</script>

<style lang="scss">
.usertableManger {
    height: 100%;
    padding: 10px;
    // background: rgb(224, 220, 220);

    .usertable {
        height: 100%;
        padding: 10px;
        background: #fff;

        .usertableAllBtn {
            padding: 5px;
            display: flex;

            .addBtn {
                margin-right: 10px;
            }
        }

        .delteBtn {
            margin: 0 5px;
        }

        .userPagination {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

    }

    .userSheach {
        background: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 17px;
        padding: 20px 0;
        .itemBtn{
            display: flex;
            .n-button{
                margin: auto 5px;
            }
        }
        .item {
            display: flex;
            align-items: center;
            margin: 0 10px;

            .selectItem {
                width: 150px;
            }

            span {
                white-space: nowrap;
                display: inline-block;
                padding-right: 12px;
            }
        }

    }
}
</style>